/*
 * @Author: 悦者生存 1002783067@qq.com
 * @Date: 2023-11-04 17:22:58
 * @LastEditors: 悦者生存 1002783067@qq.com
 * @LastEditTime: 2024-04-25 22:42:48
 * @FilePath: /login-template/client/src/layouts/index.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import { toLogin } from '@/utils/router';
import {
  FileTextOutlined,
  HomeOutlined,
  LogoutOutlined,
  MenuFoldOutlined,
  MenuUnfoldOutlined,
} from '@ant-design/icons';
import { Avatar, Button, Dropdown, Layout, Menu, MenuProps, theme } from 'antd';
import { useEffect, useState } from 'react';
import { Outlet, connect, history, useLocation } from 'umi';
import styles from './index.less';

const { Header, Sider, Content } = Layout;

interface Props {
  userInfo: { [key: string]: string };
}

function layout(props: Props) {
  const { userInfo } = props;
  const [collapsed, setCollapsed] = useState(false);
  const [defaultSelectedKeys, setDefaultSelectedKeys] =
    useState<string>('home');
  const { pathname } = useLocation();
  const {
    token: { colorBgContainer },
  } = theme.useToken();

  const logout = () => {
    // TODO: 加一个确定退出么
    localStorage.removeItem('jwt_token');
    toLogin();
  };

  const items: MenuProps['items'] = [
    {
      key: 'logout',
      label: (
        <div onClick={logout}>
          <LogoutOutlined />
          <span style={{ marginLeft: 10 }}>退出登录</span>
        </div>
      ),
    },
  ];

  const menuItemClick = ({ key }: { key: string }) => {
    history.push(key);
    setDefaultSelectedKeys(key);
  };

  // TODO: avatar 退出登录， 左边menu增加logo
  // 刷新页面时选中的menuItem
  useEffect(() => {
    setDefaultSelectedKeys(pathname);
  }, []);

  return (
    <Layout className={styles.layout}>
      <Sider trigger={null} collapsible collapsed={collapsed}>
        <div className={styles.sideLogo}>
          <img
            src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"
            alt="logo"
            className={styles.sideLogoImage}
          />
          {!collapsed && (
            <span className={styles.sideLogoText}>Ant Design Pro</span>
          )}
        </div>
        <Menu
          theme="dark"
          mode="inline"
          selectedKeys={[defaultSelectedKeys]}
          onClick={menuItemClick}
          items={[
            {
              key: '/home',
              icon: <HomeOutlined />,
              label: '首页',
            },
            {
              key: '/docs',
              icon: <FileTextOutlined />,
              label: '文档页',
            },
          ]}
        />
      </Sider>
      <Layout>
        <Header
          style={{ background: colorBgContainer }}
          className={styles.header}
        >
          <Button
            type="text"
            icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
            onClick={() => setCollapsed(!collapsed)}
            style={{
              fontSize: '16px',
              width: 64,
              height: 64,
            }}
          />
          <div className={styles.headerRightSection}>
            <Dropdown menu={{ items }} placement="bottom">
              <div>
                <Avatar
                  size={32}
                  src="https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png"
                />
                <span className={styles.username}>{userInfo.username}</span>
              </div>
            </Dropdown>
          </div>
        </Header>
        <Content
          style={{
            margin: '24px 16px',
            padding: 24,
            minHeight: 280,
            background: colorBgContainer,
          }}
        >
          <Outlet />
        </Content>
      </Layout>
    </Layout>
  );
}

const mapStateToProps = ({ user }: { user: any }) => {
  const { userInfo } = user;
  return {
    userInfo,
  };
};

export default connect(mapStateToProps)(layout);
